<template>
  <div class="workbench">
    <div class="info-bur">
      <div class="info-bur-left">
        <a-avatar
          shape="square"
          :size="86"
          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
        />
        <div style="margin-left: 20px">
          <div
            style="
              color: rgba(0, 0, 0, 0.85);
              font-weight: bold;
              font-size: 40px;
            "
          >
            {{ this.$store.state.userInfo.adminName }}
          </div>
          <div style="color: rgba(0, 0, 0, 0.45)">
            {{ this.$store.state.userRole.roles }}
          </div>
        </div>
      </div>
      <div class="info-bur-right">
        <div>
          {{
            "下午好, " +
            this.$store.state.userInfo.adminName +
            ", 准备吃什么呢？"
          }}
        </div>
      </div>
    </div>
    <div class="main-body">
      <div class="mian-left">
        <div class="mian-left-title">
          <a-badge :count="2" title="新增5条待审核">
            <span>待审核</span>
          </a-badge>
        </div>
        <div class="shen-he-list">
          <div class="shen-he-item" v-for="index in 20" :key="index">
            <div style="flex: 0.8">
              <a-avatar shape="square" size="large"></a-avatar>
            </div>
            <div class="shen-he-context" style="flex: 8">
              <span>姓名</span>
              <span>损坏内容</span>
            </div>
            <div style="flex: 2">
              <a-space>
                <a-button type="danger" @click="showModal1">审核</a-button>
                <a-button type="primary" @click="showModal2"
                  >分配维修员</a-button
                >
              </a-space>
            </div>
          </div>
        </div>
      </div>
      <div class="mian-right">
        <div id="container" style="height: 300px"></div>
        <div id="container1" style="height: 300px"></div>
      </div>
    </div>
    <a-modal
      v-model="visibleModal1"
      title="报修详情"
      @ok="handleOk1"
      cancelText="不通过"
      okText="通过"
    >
      <div>
        <img
          width="100%"
          src="https://www.bing.com/th?id=OHR.WCDBabyElephant_ZH-CN7844400740_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=HpEdgeAn"
        />
        <div class="modal-name">
          <a-icon type="user" />
          <span>孙博霆 </span>
          <a-icon type="pushpin" />
          <span>18560640741</span>
        </div>
        <div class="modal-context">
          <span>厕所冲水之后水流停不下来，墙壁四周漏水</span>
        </div>
        <div>
          <a-icon type="environment" />
          <span style="margin-left: 5px">西区 11公寓 533</span>
        </div>
        <div>
          <a-icon type="clock-circle" />
          <span style="margin-left: 5px">2020-12-4 16:13:25</span>
        </div>
      </div>
    </a-modal>
    <a-modal
      v-model="visibleModal2"
      title="分配维修员"
      @ok="handleOk2"
      okText="确定"
      cancelText="取消"
      width="50%"
    >
      <a-table
        bordered
        :columns="columns"
        :data-source="data"
        :pagination="false"
      >
        <template slot="repairNum_curr" slot-scope="repairNum_curr">
          <a-progress
            :stroke-color="{
              from: '#108ee9',
              to: '#87d068',
            }"
            :percent="repairNum_curr"
            status="active"
          />
        </template>
        <template slot="active" slot-scope="active">
          <a-popconfirm
            placement="topLeft"
            ok-text="分派"
            cancel-text="取消"
            @confirm="paixiu(active)"
          >
            <template slot="title"> 请确保维修师傅是空闲 </template>
            <a>派修</a>
          </a-popconfirm>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import { Radar } from "@antv/g2plot";
import { DataSet } from "@antv/data-set";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" },
  },
  {
    title: "繁忙度",
    dataIndex: "repairNum_curr",
    key: "repairNum_curr",
    slots: { title: "repairNum_curr" },
    scopedSlots: { customRender: "repairNum_curr" },
  },
  {
    title: "操作",
    key: "active",
    slots: { title: "active" },
    scopedSlots: { customRender: "active" },
  },
];
const data = [
  {
    key: "1",
    name: "John Brown",
    repairNum_curr: 20,
  },
  {
    key: "2",
    name: "John Brown",
    repairNum_curr: 50,
  },
  {
    key: "3",
    name: "John Brown",
    repairNum_curr: 60,
  },
];
const data1 = [
  { name: "G2", star: 10178 },
  { name: "G6", star: 7077 },
  { name: "F2", star: 7345 },
  { name: "L7", star: 2029 },
  { name: "X6", star: 298 },
  { name: "AVA", star: 806 },
];
export default {
  name: "workbench",
  data() {
    return {
      visibleModal1: false,
      visibleModal2: false,
      columns,
      data,
      data1,
    };
  },
  mounted() {
    this.logingRadar();
     this.logingRadar1();
  },
  methods: {
    logingRadar() {
      fetch(
        "https://gw.alipayobjects.com/os/bmw-prod/bda695a8-cd9f-4b78-a423-3d6d547c10c3.json"
      )
        .then((data) => data.json())
        .then((data) => {
          const { DataView } = DataSet;
          const dv = new DataView().source(data);
          dv.transform({
            type: "fold",
            fields: ["a", "b"], // 展开字段集
            key: "user", // key字段
            value: "score", // value字段
          });

          const radarPlot = new Radar("container", {
            data: dv.rows,
            xField: "item",
            yField: "score",
            seriesField: "user",
            meta: {
              score: {
                alias: "分数",
                min: 0,
                max: 80,
              },
            },
            xAxis: {
              line: null,
              tickLine: null,
              grid: {
                line: {
                  style: {
                    lineDash: null,
                  },
                },
              },
            },
            // 开启面积
            area: {},
            // 开启辅助点
            point: {
              size: 2,
            },
          });
          radarPlot.render();
        });
    },
    logingRadar1() {
      const radarPlot = new Radar("container1", {
        data: data1.map((d) => ({ ...d, star: Math.log(d.star) })),
        xField: "name",
        yField: "star",
        meta: {
          star: {
            alias: "star 数量",
            min: 0,
            nice: true,
            formatter: (v) => Number(v).toFixed(2),
          },
        },
        xAxis: {
          tickLine: null,
        },
        yAxis: {
          label: false,
          grid: {
            alternateColor: "rgba(0, 0, 0, 0.04)",
          },
        },
        // 开启辅助点
        point: {
          size: 2,
        },
        area: {},
      });
      radarPlot.render();
    },
    showModal1() {
      this.visibleModal1 = true;
    },
    showModal2() {
      this.visibleModal2 = true;
    },
    handleOk1(e) {
      console.log(e);
      this.visibleModal1 = false;
    },
    handleOk2(e) {
      console.log(e);
      this.visibleModal2 = false;
    },
    handleCancel2() {
      this.visibleModal2 = false;
    },
    paixiu(active) {
      "asd".substring();
    },
  },
};
</script>

<style scoped>
.workbench {
  width: 100%;
  height: 100%;
}
.workbench .info-bur {
  border-top: 1px solid #ebedf0;
  width: 100%;
  height: 200px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
}
.workbench .info-bur .info-bur-left {
  display: flex;
}
.workbench .info-bur .info-bur-right {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 20px;
}
.workbench .main-body {
  width: 100%;
  display: flex;
  padding: 10px;
}
.workbench .main-body .mian-left {
  flex: 2;
  background-color: #ffffff;
  margin-right: 20px;
}
.workbench .main-body .mian-right {
  flex: 1;
  background-color: #ffffff;
  padding: 10px;
}

.workbench .main-body .mian-left-title {
  padding: 15px;

  display: flex;
  align-items: center;
  border-bottom: #e8e8e8 1px solid;
}
.workbench .main-body .mian-left-title span {
  font-weight: 500;
  font-size: 24px;
  color: #0d1a26;
}

.shen-he-item {
  display: flex;
  border-bottom: solid 1px #e8e8e8;
  padding: 10px 20px;
  margin-bottom: 20px;
}
.shen-he-item .shen-he-context {
  display: flex;

  flex-direction: column;
}
.shen-he-item .shen-he-context span:nth-child(1) {
  color: rgba(0, 0, 0, 0.65);
  font-size: 16px;
}
.shen-he-item .shen-he-context span:nth-child(2) {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
.modal-name {
  margin: 10px 0;
}
.modal-context {
  margin-bottom: 10px;
}
.modal-context span {
  color: black;
  font-size: 20px;
}
</style>
